<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信读书排行榜</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="page">
        <header>
            <div class="title-container">
                <button id="return"></button>
                <div class="title">计算机榜</div>
                <button id="share"></button>
            </div>
            <div class="search-container">
                <form action="">
                    <input type="text" placeholder="搜索" class="search-text">
                    <input type="button" class="search-btn">
                </form>
            </div>
            <div class="menu">
                <ul>
                    <li>全部</li>
                    <li>办公软件</li>
                    <li>编程设计</li>
                    <li>计算机综合</li>
                </ul>
                <ul>
                    <li>理论知识</li>
                    <li>人工智能</li>
                    <li>数据库</li>
                    <li>图像视频</li>
                </ul>
            </div>
        </header>
        <section>
            <ol>
                <li>
                    <h1>1</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>746</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/930/22806930/t7_22806930.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">Python编程：从入门到实践</div>
                                <div class="author">埃里克·马瑟斯</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>86.3%</span></div>
                                    <img src="imgs/hprc.svg" alt="好评如潮" class="img1">
                                </div>            
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>2</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>329</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/683/34336683/t7_34336683.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">JavaScript高级程序设计（第4版）</div>
                                <div class="author">马特·弗里斯比</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>86.3%</span></div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>3</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>319</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/755/907755/t7_907755.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">网络是怎样连接的</div>
                                <div class="author">户根勤</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>82.8%</span></div>
                                    <img src="imgs/kzrk.svg" alt="脍炙人口" class="img2">
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>4</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>292</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/184/30179184/t7_30179184.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">操作系统导论</div>
                                <div class="author">雷姆兹·H.阿帕希杜塞尔 安德莉亚·C.阿帕希杜塞尔</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>91.3%</span></div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>5</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>264</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/196/33692196/t7_33692196.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">C++ Primer（中文版）（第5版）</div>
                                <div class="author">Stanley B·Lippman Josée Lajoie Barbara E·Moo</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>86.4%</span></div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>6</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>252</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/681/34336681/t7_34336681.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">Python编程：从入门到实践（第2版）</div>
                                <div class="author">埃里克·马瑟斯</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>67.2%</span></div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>7</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>264</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/0/622000/t7_622000.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">Redis设计与实现</div>
                                <div class="author">黄健宏</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>85.4%</span></div>
                                    <img src="imgs/hprc.svg" alt="好评如潮" class="img1">
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>8</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>215</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/916/22806916/t7_22806916.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">算法图解</div>
                                <div class="author">巴尔加瓦</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>79.6%</span></div>
                                    <img src="imgs/zdyd.svg" alt="值得一读" class="img2">
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>9</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>208</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/9/33381009/t7_33381009.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">编码：隐匿在计算机软硬件背后的语言</div>
                                <div class="author">查尔斯·佩措尔德</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>89.8%</span></div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <h1>10</h1>
                    <div class="container">
                        <div class="corner">
                            <i></i>
                            <span>189</span>
                        </div>
                        <img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/904/22739904/t7_22739904.jpg"
                            alt="图片已失效">
                        <div class="content">
                            <div>
                                <div class="name">利用Python进行数据分析（原书第2版）</div>
                                <div class="author">韦斯·麦金尼</div>
                                <div class="re-value">
                                    <div class="row">推荐值<span>84.5%</span></div>
                                    <img src="imgs/kzrk.svg" alt="脍炙人口" class="img2">
                                </div> 
                            </div>
                        </div>
                    </div>
                </li>
            </ol>
        </section>
    </div>
</body>

</html>